<template>
  <!--考试中心-->
  <div class="content" id="examination">
    <!--筛选-->
    <div class="screen">
      <span>考试记录：</span>
      <el-select v-model="record" placeholder="请选择">
        <el-option
          v-for="item in recordList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <!--<span>考试时间：</span>-->
      <!--<el-date-picker-->
        <!--v-model="time"-->
        <!--type="daterange"-->
        <!--range-separator="至"-->
        <!--start-placeholder="开始日期"-->
        <!--end-placeholder="结束日期">-->
      <!--</el-date-picker>-->

      <el-button type="success" @click="getList">筛选</el-button>
    </div>

    <!--考试记录-->
    <div class="list">
      <ul>
        <li v-for="(item, index) in examinationList">
          <img src="@/assets/images/examination/examination-green.png" alt="" v-if="item.ascroe == null">
          <img src="@/assets/images/examination/examination-yellow.png" alt="" v-else>

          <div class="li-content">
            <div class="content-top">
              {{item.examName}}
              <span style="color: #999;font-size: 16px;" v-if="item.ascroe == null">
                (需满
                <span style="color: #22944E;font-weight: 700;">{{item.needStudyTime}}</span>
                个学时方能进行考试)
              </span>
            </div>
            <div class="content-b">
              <span>考试时间 : {{item.startTime}}~{{item.endTime}}</span>
              <span style="margin-left: 30px">考试时长 : {{item.examTime}}分钟</span>
              <span style="margin-left: 30px">共</span>
              <span class="aKey">{{item.totalCount}}</span>
              <span style="margin-right: 30px">道题目</span>
              <span>得分情况 : </span>
              <span v-if="item.ascroe == null">未考</span>
              <span v-if="item.ascroe != null&&item.isCheck == 2" class="aKey">-分</span>
              <span v-if="item.ascroe != null&&item.isCheck == 1" class="aKey">{{item.ascroe}}分</span>
              <span>/总分 : {{item.grade}}分</span>
            </div>
          </div>

          <!--<div class="make" v-if="item.type == 0" @click="toMake">预约考试</div>-->
          <div class="begin" v-if="item.ascroe == null" @click="toPath(item)">开始考试</div>
          <div class="analysis" v-if="item.ascroe != null&&item.isCheck == 1" @click="toPath(item)">试卷分析</div>
          <div class="make" v-if="item.ascroe != null&&item.isCheck == 2">正在阅卷</div>
        </li>
      </ul>
    </div>
    <!--分页器-->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="pagination.currentPage"
      :page-size="20"
      layout="total, prev, pager, next"
      :total="pagination.total"
      prev-text="上一页"
      next-text="下一页">
    </el-pagination>
  </div>
</template>

<script>
  import {getExamListForDoor} from '@/request/api'
  export default {
    data() {
      return {
        tableInfo: {
          paper: [],
          analysis: []
        },
        record: '1',//考试类型筛选
        recordList: [
          {value: '0',label: '已考'},
          {value: '1',label: '待考'},
        ],
        time: '',//考试时间筛选,
        examinationList: [],//考试记录
        /*   -------分页-------- */
        pagination: {
          currentPage: 1,//当前页
          total: 0//共多少条
        },
      }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
          const loading = this.openLoading();
            var params = {
              "_search": true,
              "bgTm": "",
              "createBy": 0,
              "data": {
                "examStatus":this.record,
                startTime:'',
                endTime:'',
                "userId":JSON.parse(localStorage.getItem('userInfo')).id,
                examObjCompanyType: JSON.parse(localStorage.getItem('userInfo')).userType
              },
            "endTm": "",
            "keywords": "",
            "pageNumber": this.pagination.currentPage,
            "pageSize": 20,
            "selected": "",
            "selectedType": "",
            "sortField": "",
            "sortOrder": "",
            "status": 0,
            "type": "",
              examObjCompanyType: JSON.parse(localStorage.getItem('userInfo')).userType
        }
          getExamListForDoor(params).then(res=> {
            loading.close();
            if(res.code==200) {
              this.examinationList = res.data.records
              this.pagination.total = res.data.total
              if(this.examinationList.length==0) {
                this.$message({
                  type: 'info',
                  message: '暂无考试',
                  offset: '500'
                })
              }else {

              }
            }
          })
        },
      //      换页
      handleCurrentChange(val) {
        this.pagination.currentPage = val
        this.getList()
      },
//        去考试/试卷分析
      toPath(item) {
        if(item.ascroe == null) {
          if(item.needStudyTime > JSON.parse(localStorage.getItem('userInfo')).period) {
            this.$message({
              type: 'info',
              message: '需满'+item.needStudyTime+'个学时才能进行考试',
              offset: '500'
            })
          }else {
            this.$confirm('是否确定参加该场考试?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$router.push({
                name:'startExam',
                params: {
                  type:1,
                  id:item.id,
                  time: item.examTime,
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消',
                offset: '500'
              });
            });
          }
        }else {
          this.$router.push({
            name:'paperAnalysisInfo',
            params: {
              id:item.id
            }
          })
        }
      },
//      预约考试
      toMake() {
        this.$confirm('确定预约吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '预约成功!',
            offset: '500'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
            offset: '500'
          });
        });
      }
    },
    mounted() {

    }
  };
</script>

<style scoped>
  .content {
    padding-top: 30px;
  }
  .screen {
    font-size: 18px;
    margin-bottom: 30px;
  }
  .screen span {
    margin-right: 10px;
  }
  .screen /deep/ .el-select {
    margin-right: 60px;
  }
  .screen /deep/ .el-button--success {
    width: 100px;
    height: 40px;
    background: #22944E;
  }
  .list {
    width: 100%;
    /*height: 969px;*/
    background: #FFFFFF;
    box-shadow: 0px 0px 12px 0px rgba(44, 73, 55, 0.11);
  }
  .list ul {
    padding: 0;
  }
  .list ul li {
    height: 120px;
    width: 100%;
    list-style-type:none;
    border-bottom: 1px solid #e5e5e5;
    padding: 30px 20px;
    box-sizing: border-box;
  }
  .list ul li img {
    vertical-align: middle;
    margin-right: 15px;
  }
  .list ul li .li-content {
    vertical-align: middle;
    display: inline-block;
    height: 60px;
  }
  .list ul li .li-content .content-top{
    font-size: 20px;
    margin-bottom: 11px;
  }
  .list ul li .li-content .content-b{
    font-size: 16px;
    color: #9a9a9a;
  }
  .list ul li .li-content .content-b .aKey {
    color: #22944E;
    font-weight: 700;
  }
  .make, .begin, .analysis {
    float: right;
    width: 124px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
  }
  .make {
    border: 1px solid #999;
    color: #999;
  }
  .begin {
    background: #22944E;
    color: #fff;
  }
  .analysis {
    background: #FFF000;
  }
</style>
